import Vue from 'vue'
import Vuex from 'vuex'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(Vuex)

const state = {
  username: ''
}

// username为login的用户名称传值
const mutations = {
  setName (state, username) {
    state.username = username
    // 得到值后存入localStorage中，因为网页刷新后vuex会重新初始化，导致数据丢失
    localStorage.setItem('username', username)
  },
  getName (state) {
    return state.username
  }
}

// 因为mutation必须同步执行，所以在action内部执行异步操作
const action = {
  actSetName ({commit}, username) {
    commit('setName', username)
  },
  actGetName ({commit}) {
    commit('getName')
  }
}

const getters = {
  getUserName () {
    return localStorage.getItem('username')
  }
}

export default new Vuex.Store({
  state: state,
  mutations: mutations,
  action: action,
  getters: getters
})
